import Vue from 'vue'
import Vuex from 'vuex'
import http from '@/util/http'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
	plugins: [createPersistedState({
		// cityId cityName 持久化
		reducer: (state) => {
			return {
				cityId: state.cityId,
				cityName: state.cityName
			}
		}
	})],
	// state 公共状态
	state: {
		cityId: '510100',
		cityName: '成都',
		cinemaList: [],
		istabbarShow: true
	},
	// 支持异步和同步
	actions: {
		getCinemaData (store,cityId) {
			return http({
				url:`/gateway?cityId=${store.state.cityId}&ticketFlag=1&k=1167114`,
				headers:{
					'X-Host': 'mall.film-ticket.cinema.list'
	
				}
			}).then(res => {
				store.commit('changeCinemaDate',res.data.data.cinemas)
			})
		}
	},
	// 同一管理 被devtools 记录状态的修改
	// 不支持异步只能支持同步
	mutations: {
		changeCityName (state, cityName) {
			state.cityName = cityName
		},
		changeCityId (state, cityId) {
			state.cityId = cityId
		},
		changeCinemaDate (state,data) {
			state.cinemaList = data
		},
		clearCinema (state) {
			state.cinemaList = []
		},

		show (state) {
			state.istabbarShow = true
		},
		hide (state) {
			state.istabbarShow = false
		},
	}
	
})

// vuex
// 管理保存公共状态 (分散在各个组件内的状态，统一管理)

// 默认管理在内存 一刷新页面 公共状态就丢失了
// 防止丢失 使用持久化-todo

/* vuex 项目应用
1.非父子的通信
2.后端数据的缓存快，减少重复数据请求，减少服务器压力 增加用户体验


*/
